<template>
  <div class="wraper">
    <!-- swipper创建的时候是空数组，home获取数据之后swiper才显示，所以默认显示最后一张-->
      <swiper :options="swiperOption" >
        <!-- slides -->
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <img class="swiper-img" :src="item.imgUrl" alt />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>
<script>
export default {
  name:  'HomeSwiper',
  props:{
    swiperList:Array,
  },
  data() {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 1000,
        paginationClickable:true,
        paginationAsRange:true,
      },
    };
  },
}
</script>
<style scoped lang="stylus">
// 样式穿透 swiper-pagination-bullet-active样式属于swiper组件
.wraper >>> .swiper-pagination-bullet-active {
  background: #fff !important;

}

.wraper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 30%;
  background: #ccc;
  /* 图片宽/高=31.25% 给图设overflow:hidden,宽度100% 高度始终等于宽度的31.25%，这样就可以使图片始终撑开 padding的百分比参照的是父元素的宽度
    或者设置height：26.7vm,这样有兼容问题
  */
}
.swiper-img {
  width: 100%;
}
</style>
